<script setup lang="ts">
import { useAppBreakpoints } from '@peng_kai/theme/vue/composables/useAppBreakpoints';
import Banner from '~/pages/invitation/components/Banner.vue';
import ExplainPC from '~/pages/invitation/components/ExplainPC.vue';
import HistoryPC from '~/pages/invitation/components/HistoryPC.vue';
import { useList } from './hooks';

const { count } = useList();
const bp = useAppBreakpoints();
const route = useRoute();

watch([bp, count], () => {
  if (bp.tabletl && route.name === 'invitation' && count.value > 0) {
    globalPopups.invitationSpin.open();
  }
}, { deep: true });
</script>

<template>
  <div v-if="$bp.tabletl" class="flex flex-col gap-15">
    <Banner />
    <HistoryPC />
    <ExplainPC />
  </div>
</template>
